$(function () {
    var showContentLoading = function () {
        $('.content-panel .content-panel-loading').removeClass('hidden');
    };
    var hideContentLoading = function () {
        $('.content-panel .content-panel-loading').addClass('hidden');
    };
    // 选择日期配置
    var format = 'YYYY-MM-DD';
    // 选择日期
    $('#datePickerInput').daterangepicker({
        'showDropdowns': true,
        'autoApply': true,
        'dateLimit': {
            'days': 30
        },
        'locale': {
            'format': format,
            'applyLabel': lang('date.ensure'),
            'cancelLabel': lang('date.cancel'),
            'daysOfWeek': [
                lang('week.7'),
                lang('week.1'),
                lang('week.2'),
                lang('week.3'),
                lang('week.4'),
                lang('week.5'),
                lang('week.6')
            ],
            'monthNames': [
                lang('month.1'),
                lang('month.2'),
                lang('month.3'),
                lang('month.4'),
                lang('month.5'),
                lang('month.6'),
                lang('month.7'),
                lang('month.8'),
                lang('month.9'),
                lang('month.10'),
                lang('month.11'),
                lang('month.12')
            ],
            'firstDay': 1
        },
        'linkedCalendars': false,
        'parentEl': 'body',
        'startDate': $('#datePicker').find('.start').html(),
        'endDate': $('#datePicker').find('.end').html(),
        'minDate': '2000-01-01',
        'maxDate': '2038-01-01',
        'opens': 'left'
    }, function (start, end, label) {
        $('#datePicker').find('.start').html(start.format(format));
        $('#datePicker').find('.end').html(end.format(format));
        refreshPage();
    });
    $('#datePickerContainer').on('click', function () {
        $('#datePickerInput').trigger('focus');
    });
    // 趋势图配置
    var lineConfig = {
        chart: {
            type: 'line'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: [],
            labels: {
                step: 1
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            pointFormat: '<b>{point.y}</b><br/>',
            valueSuffix: ''
        },
        series: []
    };    
//  $('#tabSwitchGroup .btn').on('click', function (e) {
//      e.preventDefault();
//      var tab = $(this);
//
//  });
    // 饼图配置
    var pieChartConfig = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '',
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                size: 140,
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            verticalAlign: 'top',
            align: 'right',
            symbolWidth: 10,
            symbolHeight: 8,
            symbolPadding: 4,
            padding: 0,
            labelFormat: '',
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: false,
            labelFormatter: function () {
                if (textSize(12, this.name).width > 190) {
                    return this.name.split(': ')[1];
                }
                return this.name;
            },
            borderWidth: 0
        },
        series: [{
            name: lang('proportion'),
            colorByPoint: true,
            colors: ['#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1', '#434348'], 
            data: []
        }]
    };
    // 数据转换饼图
    var transformChartData = function (series) {
        pieChartConfig.series[0].data = [];
        $.each(series, function (index, data) {
            pieChartConfig.series[0].data.push({
                name: data.name + ': ' + data.total,
                y: parseFloat(data.value)
            });
        });
        return pieChartConfig;
    };
    var switchSeries = {};
    var refreshPage = function () {
        var startDate = $('#datePicker').find('.start').html();
        var endDate = $('#datePicker').find('.end').html();
        //重新渲染趋势图的x轴
        var startDateObj = getDate(startDate);
        var days = getDate(endDate).getDays(startDateObj);
        lineConfig.xAxis.categories = [];
        for (var i = 0; i <= days; i++) {
            lineConfig.xAxis.categories.push(startDateObj.customDays(i).customFormat());
        }
        if (days > 8) {
            lineConfig.xAxis.labels.step = Math.round(days / 8);
        } else {
            lineConfig.xAxis.labels.step = days;
        }        
        var param = {};
        param.hotel = window.currentHotel;
        param.start = startDate;
        param.end = endDate;
        showContentLoading();
        ajaxRequest('/Home/Report/getVipFinance', param, 'post', function (data) {
            var info = data.data;
            // 入住次数占比
            var checkin = info.checkin;
            // 会员收支占比
            var payment = info.payment;
            // 饼图
            $('#checkinChart').highcharts(transformChartData(checkin));
            $('#paymentChart').highcharts(transformChartData(payment));
            switchSeries.income = [];
            $.each(info.recharge, function (index, value) {
                switchSeries.income.push(parseFloat(value));
            });
            switchSeries.consume = [];
            $.each(info.consumption, function (index, value) {
                switchSeries.consume.push(parseFloat(value));
            });
            // 运营总览趋势图
            var tabSwitchChart = $('#tabSwitchChart');
            lineConfig.yAxis.title.text = lang('unit.left')+window.symbols+lang('unit.right');
            lineConfig.tooltip.valueSuffix = '';
            lineConfig.series = [{
                name: lang('recharge.1'),
                data: switchSeries['income']
            },{
                name: lang('recharge.4'),
                data: switchSeries['consume']
            }];
            tabSwitchChart.highcharts(lineConfig);  
            hideContentLoading();
        }, function (error) {
            if (error.responseJSON !== undefined) {
                modalAlert(error.responseJSON.info);
            }
        });
    };
    refreshPage();
});
